'use client';
import React, { Component } from 'react';
import Link from 'next/link';

class Sidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isClicked: {
        Home: false,
        About: false,
        Contact: false,
      },
    };

    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(item) {
    this.setState((prevState) => ({
      isClicked: {
        ...prevState.isClicked,
        [item]: !prevState.isClicked[item],
      },
    }));
  }

  render() {
    const { isClicked } = this.state;

    return (
      <div className="h-screen w-64 bg-gray-800 flex flex-col justify-between p-4">
        <div className="space-y-2 ">
          <div className="flex-shrink-0 p-2">
            {/* 移除了自定义的mb-20类，即移除了marginBottom样式 */}
            <h2 className="text-xl font-semibold text-white">某某管理系统</h2>
          </div>
          {/* 使用 mt-4 为每个链接添加一些上边距（如果需要的话） */}
          <Link
            href="/"
            className="block px-3 py-2 rounded hover:bg-gray-700 text-white text-decoration-none focus:outline-none focus:bg-gray-700 transition duration-150 ease-in-out"
          >
            Home
          </Link>
          <Link
            href="/about/about"
            className="block px-3 py-2 rounded hover:bg-gray-700 text-white text-decoration-none focus:outline-none focus:bg-gray-700 transition duration-150 ease-in-out"
          >
            About
          </Link>
          <Link
            href="/dashboard/dashboard"
            className="block px-3 py-2 rounded hover:bg-gray-700 text-white text-decoration-none focus:outline-none focus:bg-gray-700 transition duration-150 ease-in-out"
          >
            Dashboard
          </Link>
          <Link
            href="/users/users"
            className="block px-3 py-2 rounded hover:bg-gray-700 text-white text-decoration-none focus:outline-none focus:bg-gray-700 transition duration-150 ease-in-out"
          >
            Users
          </Link>
        </div>
        {/* 如果还有底部内容，可以在这里添加 */}
        {/* <div className="flex-shrink-0">底部内容</div> */}
      </div>
    );
  }
}

export default Sidebar;
